<template>
	<view class="page">
		<mescroll-uni ref="mescrollRef" height="100%" top="0" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
		 @up="upCallback">
			<view class="tearch_evaluate_box">
				<view class="tearch_evaluate_item">
					<view class="tearch_evaluate_top">
						<view class="tearch_evaluate_right">
							<view class="tearch_evaluate_right_title">
								<text class="date">2019-10-15</text>
							</view>
							<view class="rate">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
							</view>
						</view>
					</view>
					<view class="tearch_evaluate_bot">
						<view class="tearch_evaluate_right_content">
							盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子······
						</view>
						<view class="tearch_evaluate_thumb">
							<scroll-view scroll-x="true" class="scroll">
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="my_evaluate_good">
						<view class="good_thumb">
							<image src="../../../static/img/2.jpg" mode="widthFix"></image>
						</view>
						<view class="good_text">
							<view class="title">开锁换锁</view>
							<view class="price">价格：<text>面议</text></view>
							<view class="price">时间：<text>2020-07-01 18:00-20:00</text></view>
							<view class="price">地址：<uni-icons class="position_icon" type="location-filled" size="14" color="#565656"></uni-icons>信阳市羊山新区恒大名都1号楼…</view>
						</view>
					</view>
				</view>
				<view class="tearch_evaluate_item">
					<view class="tearch_evaluate_top">
						<view class="tearch_evaluate_right">
							<view class="tearch_evaluate_right_title">
								<text class="date">2019-10-15</text>
							</view>
							<view class="rate">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
							</view>
						</view>
					</view>
					<view class="tearch_evaluate_bot">
						<view class="tearch_evaluate_right_content">
							盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子······
						</view>
						<view class="tearch_evaluate_thumb">
							<scroll-view scroll-x="true" class="scroll">
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="my_evaluate_good">
						<view class="good_thumb">
							<image src="../../../static/img/2.jpg" mode="widthFix"></image>
						</view>
						<view class="good_text">
							<view class="title">开锁换锁</view>
							<view class="price">价格：<text>面议</text></view>
							<view class="price">时间：<text>2020-07-01 18:00-20:00</text></view>
							<view class="price">地址：<uni-icons class="position_icon" type="location-filled" size="14" color="#565656"></uni-icons>信阳市羊山新区恒大名都1号楼…</view>
						</view>
					</view>
				</view>
				<view class="tearch_evaluate_item">
					<view class="tearch_evaluate_top">
						<view class="tearch_evaluate_right">
							<view class="tearch_evaluate_right_title">
								<text class="date">2019-10-15</text>
							</view>
							<view class="rate">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
							</view>
						</view>
					</view>
					<view class="tearch_evaluate_bot">
						<view class="tearch_evaluate_right_content">
							盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子······
						</view>
						<view class="tearch_evaluate_thumb">
							<scroll-view scroll-x="true" class="scroll">
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
								<view class="box">
									<image src="../../../static/img/1.jpg" mode="widthFix"></image>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="my_evaluate_good">
						<view class="good_thumb">
							<image src="../../../static/img/2.jpg" mode="widthFix"></image>
						</view>
						<view class="good_text">
							<view class="title">开锁换锁</view>
							<view class="price">价格：<text>面议</text></view>
							<view class="price">时间：<text>2020-07-01 18:00-20:00</text></view>
							<view class="price">地址：<uni-icons class="position_icon" type="location-filled" size="14" color="#565656"></uni-icons>信阳市羊山新区恒大名都1号楼…</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			uniRate
		},
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					}
				}
			};
		},
		methods: {
			downCallback() {
				//联网加载数据
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				// let params = {
				// 	page_size: page.size,
				// 	page: page.num,
				// 	random_str: this.$dokey.getRandom(),
				// 	timestamp: this.$dokey.getTime(),
				// 	method: 'website.mould.log.list',
				// 	sign: this.$md5(this.$dokey.secretdate('website.mould.log.list'))
				// }
				// requestAll(params).then(resp => {
				// 	if (resp.code == 1) {
				// 		let data = resp.response_data
				// 		if (page.num == 1) this.dataArray = []; //如果是第一页需手动制空列表
				// 		this.dataArray = this.dataArray.concat(data.list); //追加新数据
				// 		if (page.num == 1) this.previewList = []
				// 		this.previewList = this.previewList.concat(data.list);
				// 		this.pageTotal = data.total_page
				// 		this.mescroll.endByPage(data.list.length, this.pageTotal);
				// 	}
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.tearch_evaluate_box {
		padding: 33rpx;

		.tearch_evaluate_item {
			margin-bottom: 33rpx;
			padding-bottom: 33rpx;
			border-bottom: 25rpx solid #F4F4F4;

			.tearch_evaluate_top {
				display: flex;
				margin-bottom: 10rpx;

				.tearch_evaluate_left {
					margin-right: 30rpx;
					flex: 0 0 100rpx;
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}

				.tearch_evaluate_right {
					flex: 1;

					.tearch_evaluate_right_title {
						font-size: 32rpx;
						color: #565656;

						.date {
							font-size: 24rpx;
							float: right;
							color: #ddd;
						}
					}

					.rate {
						display: inline-block;
						font-size: 22rpx;
						margin-bottom: 6rpx;

						.pingfen {
							display: inline-block;
						}
					}
				}
			}

			.tearch_evaluate_bot {
				.tearch_evaluate_right_content {
					padding-bottom: 15rpx;
					font-size: 28rpx;
					color: #B3B3B3;
				}

				.tearch_evaluate_thumb {
					height: auto;
					overflow: hidden;
					padding-bottom: 28rpx;
					margin-bottom: 33rpx;
					border-bottom: 1px solid rgba($color: #000000, $alpha: .1);

					.scroll {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						box-sizing: border-box;
					}

					.box {
						display: inline-block;
						width: 133rpx;
						height: 127rpx;
						margin-right: 25rpx;
						overflow: hidden;

						image {
							width: 133rpx;
							min-height: 100%;
						}
					}
				}
			}

			.my_evaluate_good {
				display: flex;

				.good_thumb {
					flex: 0 0 157rpx;
					width: 157rpx;
					height: 157rpx;
					margin-right: 33rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						min-height: 100%;
					}
				}

				.good_text {
					flex: 1;

					.title {
						width: 496rpx;
						margin-bottom: 16rpx;
						line-height: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
						color: #565656;
					}

					.price {
						margin-bottom: 16rpx;
						line-height: 100%;
						font-size: 26rpx;
						color: #B3B3B3;

						text {
							font-size: 26rpx;
							color: #565656;
						}

						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
</style>
